<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./swiper-bundle.min.css">
    <script src="./swiper-bundle.min.js"></script>
    <script src="../../三段/五月/jquery/jquery.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    /* li {
        list-style: none;
        padding-top: 35px;
        padding-bottom: 35px;
    }

    .swiper {
        width: 700px;
        height: 500px;
        background-color: aqua;
        margin: 100px auto;
    }

    .swiper-left {
        float: left;
        width: 500px;
        height: 500px;
        background-color: yellow;
    }

    .swiper-left ul li img {
        width: 500px;
        height: 500px;
    }

    .swiper-right {
        float: right;
        width: 200px;
        height: 500px;
        text-align: center;
        background-color: chartreuse;
    }

    .swiper-right ul li:hover {
        font-size: 24px;
    } */



    html,
    body {
        position: relative;
        /* height: 100%; */
    }

    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
    }

    .swiper {
        width: 800px;
        height: 500px;
        margin: 100px auto;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .swiper-slide img {
        display: block;
        width: 500px;
        height: 300px;
        object-fit: cover;
    }
    .rightList {
        width: 200px;
        height: 500px;
        background-color: brown;
    }
</style>

<body>

    <!-- <div class="swiper">
        <div class="swiper-left">
            <ul>
            </ul>
        </div>
        <div class="swiper-right">
            <ul>
                <li>第一个</li>
                <li>第二个</li>
                <li>第三个</li>
                <li>第四个</li>
                <li>第五个</li>
            </ul>
        </div>
    </div> -->




    <!-- Swiper -->
    <div class="swiper mySwiper swiper-initialized swiper-vertical swiper-pointer-events swiper-backface-hidden">
        <div class="swiper-wrapper" id="swiper-wrapper-814eb3c9bca9af41" aria-live="polite"
            style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
            <!-- <div class="swiper-slide swiper-slide-active" role="group" aria-label="1 / 9"
                    style="height: 479px; margin-bottom: 30px;">Slide 1</div>
                <div class="swiper-slide swiper-slide-next" role="group" aria-label="2 / 9"
                    style="height: 479px; margin-bottom: 30px;">Slide 2</div>
                <div class="swiper-slide" role="group" aria-label="3 / 9" style="height: 479px; margin-bottom: 30px;">
                    Slide 3</div>
                <div class="swiper-slide" role="group" aria-label="4 / 9" style="height: 479px; margin-bottom: 30px;">
                    Slide 4</div>
                <div class="swiper-slide" role="group" aria-label="5 / 9" style="height: 479px; margin-bottom: 30px;">
                    Slide 5</div>
                <div class="swiper-slide" role="group" aria-label="6 / 9" style="height: 479px; margin-bottom: 30px;">
                    Slide 6</div>
                <div class="swiper-slide" role="group" aria-label="7 / 9" style="height: 479px; margin-bottom: 30px;">
                    Slide 7</div>
                <div class="swiper-slide" role="group" aria-label="8 / 9" style="height: 479px; margin-bottom: 30px;">
                    Slide 8</div>
                <div class="swiper-slide" role="group" aria-label="9 / 9" style="height: 479px; margin-bottom: 30px;">
                    Slide 9</div>
            </div> -->
            <ul></ul>
            <div
                class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-vertical">
                <!-- <span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button"
                    aria-label="Go to slide 1" aria-current="true"></span><span class="swiper-pagination-bullet"
                    tabindex="0" role="button" aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet"
                    tabindex="0" role="button" aria-label="Go to slide 3"></span><span class="swiper-pagination-bullet"
                    tabindex="0" role="button" aria-label="Go to slide 4"></span><span class="swiper-pagination-bullet"
                    tabindex="0" role="button" aria-label="Go to slide 5"></span><span class="swiper-pagination-bullet"
                    tabindex="0" role="button" aria-label="Go to slide 6"></span><span class="swiper-pagination-bullet"
                    tabindex="0" role="button" aria-label="Go to slide 7"></span><span class="swiper-pagination-bullet"
                    tabindex="0" role="button" aria-label="Go to slide 8"></span><span class="swiper-pagination-bullet"
                    tabindex="0" role="button" aria-label="Go to slide 9"></span> -->

            </div>
            <div class="rightList">
                <ul>
                    <li>第一个</li>
                    <li>第二个</li>
                    <li>第三个</li>
                    <li>第四个</li>
                    <li>第五个</li>
                </ul>
            </div>

            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
        </div>


</body>
<script>

    $.ajax({
        url: 'https://liu.zzgoodqc.cn/banner',
        method: 'GET',
        dataType: 'json',
        success: function (res) {
            console.log(res);
            var str = ''
            for (let i in res.data) {
                str += `<li class="swiper-slide" role="group" aria-label="${+i + 1} / 9" style="height: 479px; margin-bottom: 30px;">
                            <img src="${res.data[i].img}" alt="">
                        </li>`
            }
            swiper.appendSlide(str)
            // $('.swiper-left').html(str)
            // console.log(str);
        }
    })
    // $('.swiper-right ul li').mouseover(function(){
    //     console.log(666);
    //     $(this).attr('src=' + `${res.data[index]}`).show()
    // })
    var swiper = new Swiper(".mySwiper", {
        direction: "vertical",
        slidesPerView: 1,
        spaceBetween: 30,
        mousewheel: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        renderCustom: function (swiper, current, total) {
            //   console.log(current);//1 2 3 4

            // 1、分页器激活样式的改变---给自己添加激活样式并将兄弟的激活样式移出。
            $('.custom-pagination').children().eq(current - 1).addClass('active').siblings().removeClass('active');

            // 2、分页器点击的时候同时切换轮播图(事件委托)----循环模式slideToLoop--
            $('.custom-pagination').on('click', 'li', function () {
                mySwiper.slideToLoop($(this).index(), 1000, false)
            })
        }
    });



</script>

</html>